<template>
	<scroll-view class="mealContainer" :scroll-top="pageScroll" scroll-y="true" @scroll="scrollPage">
		<view class="buyContainer">
			<!-- <view class="couponContainer">
				<view class="title">
					优惠助手
				</view>
				<view class="content">
					9张卡券
				</view>
			</view> -->
			<view class="buyInfo" :style="[buyNum==0?{}:{backgroundColor:'rgb(228,0,48)'}]">
				<view class="buyIcon" @click="changeShow" :style="[buyNum==0?{}:{filter: 'grayscale(0%)'}]">
					<view class="buyNum" v-if="buyNum!=0">
						{{buyNum}}
					</view>
				</view>
				<view class="content" v-if="buyNum==0">
					未选购商品
				</view>
				<view class="price" v-if="buyNum!=0">
					￥{{allPrice}}
				</view>
				<view class="goOrder" v-if="buyNum!=0" @click="goOrder">
					<view class="title">
						选好了
					</view>
					<view class="englishTitle">
						Order
					</view>
				</view>
			</view>
		</view>
		<view class="back" :style="[backActive==true?{backgroundColor:'#FFF'}:{}]">
			<view @click="goBack" class="backContent" :style="[backActive==true?{backgroundColor:'#FFF'}:{}]">
				<u-icon name="arrow-left" :color="[backActive==true?'#333333':'#FFF']" size="20"></u-icon>
			</view>
			<view class="search" v-if="backActive==true" @click="goSearch">
				<view class="searchIcon">
					<u-icon name="search" size="26"></u-icon>
				</view>
				<view class="searchContent">
					搜一搜你想吃的餐品
				</view>
			</view>
			<view class="otherSearch" v-if="backActive==false" @click="goSearch">
				<u-icon name="search" size="25" color="#FFF"></u-icon>
			</view>
		</view>
		<view class="hotContainer">
			<image src="../../static/orderMeal/back.png" mode="" class="img"></image>
			<!-- <view class="makeup">
				<view class="white"></view>
				<view class="red"></view>
				<view class="white"></view>
				<view class="red"></view>
				<view class="white"></view>
			</view>
			<view class="hotTitle">
				本店热卖
			</view>
			<view class="hotBack">
				HOT
			</view>
			<view class="hotFoods">
				<view class="food" v-for="food in foods" :key="food.id">
					<view class="foodImg"></view>
					<view class="foodInfo">
						<view class="name">{{food.name}}</view>
						<view class="priceAndAdd">
							<view class="priceContainer">
								￥<text class="price">{{food.price}}</text>
							</view>
							<view class="add">
								<u-icon name="plus" color="#FFF" size="13px" bold></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
		<view class="orderContainer">
			<view class="locationContainer">
				<view class="location">
					<view class="own">
						<view class="ownIcon">
							
						</view>
						<view class="ownContent">
							自取
						</view>
					</view>
					<view class="locContent">
						<view class="titleContainer">
							<view class="title">
								{{storeInfo.shop_name}}
							</view>
							<!-- <view class="titleIcon">
								<u-icon name="arrow-down" size="16"></u-icon>
							</view> -->
						</view>
						<view class="content">
							{{storeInfo.shop_address}}
						</view>
					</view>
				</view>
				<view class="prepare">
					<view class="decorate">
						
					</view>
					<view class="title">
						<view v-if="storeInfo.status==1">营业中</view>
						<view v-if="storeInfo.status==0">已闭店</view>
					</view>
				</view>
			</view>
			<view class="select">
				<u-tabs :list="selectList" lineColor="rgb(228,0,48)" @click="currentTab" lineHeight="5"
				:activeStyle="{color:'#333333',fontWeight:'bold',fontSize:'30rpx',transition:'all 0.3s'}"
				></u-tabs>
			</view>
			<view class="warning">
			    <u-notice-bar :text="warningText" mode="closable"></u-notice-bar>
			</view>
			<view class="foodContainer" v-if="current==0">
				<view class="menus">
					<view class="menu" v-for="(menu,index) in menus" :key="index">
						<view @click="menuActive(index)" :style="[menu.isActive==true?{backgroundColor:'rgb(228,0,48)',color:'#FFF',fontWeight:'bold'}:{}]">
							{{menu.name}}
						</view>
						<view class="allNum" v-if="menu.num!=0">
							{{menu.num}}
						</view>
					</view>
				</view>
				<scroll-view class="content" 
				:scroll-top="scrollTop"
				 scroll-y="true" 
				 scroll-with-animation="true"
				 @scroll="scroll">
					<view class="title">
						{{nowCategory}}
					</view>
					<view class="food" v-for="(food,index) in allFoods" :key="index">
						<view class="select" @click="goSelect(food.id)" v-if="categoryType==2&&userInfo==true">
							选规格
							<div class="numWarning" v-if="food.num!=0">
								{{food.num}}
							</div>
						</view>
						<view class="add"
						:style="[food.num==0?{}:{width:'180rpx'}]" v-if="categoryType==1&&userInfo==true">
							<view class="multiImg" v-if="food.num!=0" 
							@click="multiFood(index)">
								<u-icon name="minus"
								bold
								size="18"
								color="#FFF"
								></u-icon>
							</view>
							<view class="foodNum" v-if="food.num!=0">
						 		{{food.num}}
							</view>
							<view class="addImg" @click="addFood(index)" :style="[food.num==0?{}:{backgroundColor:'#FFF'}]">
								<u-icon name="plus" 
								bold 
								size="18" 
								:color="[food.num==0?'#FFF':'rgb(235,0,41)']"
								></u-icon>
							</view>
						</view>
						<view class="foodImg" :style="[{backgroundImage:'url('+food.image+')'}]">
							
						</view>
						<view class="foodContent">
							<view class="name">
								{{food.name}}
							</view>
							<view class="type">
								{{food.description}}
							</view>
							<view class="priceContainer">
								￥<text class="price">{{food.price}}</text>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="kitchenContainer" v-if="current==1">
				<view class="menus">
					<view class="menu" v-for="(menu,index) in kitchenMenus" :key="index">
						<view @click="kitchenMenuActive(index)" :style="[menu.isActive==true?{backgroundColor:'rgb(228,0,48)',color:'#FFF',fontWeight:'bold'}:{}]">
							{{menu.name}}
						</view>
					</view>
				</view>
				<scroll-view class="content" 
				:scroll-top="scrollTop"
				 scroll-y="true" 
				 scroll-with-animation="true"
				 @scroll="scroll">
					<view class="advertContainer">
						
					</view>
					<view class="title">
						当季热推
					</view>
					<view class="food" v-for="(food,index) in allFoods" :key="index">
						<view class="select">
							选规格
						</view>
						<view class="foodImg">
							
						</view>
						<view class="foodContent">
							<view class="name">
								{{food.name}}
							</view>
							<view class="type">
								{{food.content}}
							</view>
							<view class="priceContainer">
								￥<text class="price">{{food.price}}</text>起
							</view>
						</view>
					</view>
					<view class="title">
						OK餐单人餐
					</view>
					<view class="food" v-for="(food,index) in okFoods" :key="index">
						<view class="select">
							选规格
						</view>
						<view class="foodImg">
							
						</view>
						<view class="foodContent">
							<view class="name">
								{{food.name}}
							</view>
							<view class="type">
								{{food.content}}
							</view>
							<view class="priceContainer">
								￥<text class="price">{{food.price}}</text>起
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<u-overlay :show="show" @click="show = false" zIndex="80">
			<view class="popupContainer">
				<u-popup :show="show" :round="10" 
				mode="bottom" @close="close" 
				zIndex="90" :overlay="false">
					<view class="allContainer">
						<view class="titleContainer">
							<view class="title">
								购物车
							</view>
							<view class="operate" @click="delAll">
								<div class="delIcon">
									<u-icon name="trash" color="#999999"></u-icon>
								</div>
								清空购物车
							</view>
						</view>
						<view class="cartContainer">
							<view class="cartFood" v-for="(food,index) in cartFoods" :key="index">
								<view class="foodImg" :style="[{backgroundImage:'url('+food.image+')'}]">
									
								</view>
								<view class="foodInfo">
									<view class="name">
										{{food.name}}
									</view>
									<view class="priceContainer">
										￥<view class="price">
											{{food.amount}}
										</view>
									</view>
								</view>
								<view class="changeNum">
									<view class="sub" @click="changeSub(index)">
										<u-icon name="minus" color="rgb(228,0,48)" size="20" bold></u-icon>
									</view>
									<view class="num">
										{{food.number}}
									</view>
									<view class="add" @click="changeAdd(index)">
										<u-icon name="plus" color="#FFF" size="20" bold></u-icon>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-popup>
			</view>
		</u-overlay>
		<u-popup :show="confirmDel" @close="delClose" :round="10" mode="center">
			<view class="confirmContent">
				<view class="title">
					您确定要清空购物车吗？
				</view>
				<view class="operate">
					<view class="cancelBtn" @click="cancelDel">取消</view>
					<view @click="confirmDelete()" class="confirmBtn"
					>确定</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="ifLogin" @close="loginClose" :round="10" mode="center">
			<view class="confirmContent">
				<view class="title">
					未登录，仅可查看
				</view>
				<view class="operate">
					<view class="cancelBtn" @click="ifLogin=false">确定</view>
					<view @click="goLogin()" class="confirmBtn"
					>前往登录</view>
				</view>
			</view>
		</u-popup>
	</scroll-view>
</template>

<script>
	export default {
		data() {
			return {
				backActive:false,
				scrollTop:0,
				pageScroll:0,
				current:0,
				buyNum:0,
				allPrice:0,
				categoryType:'',
				nowCategory:'',
				show:false,
				kitchenMenus:[
					{
						id:0,
						name:'当季热推',
						isActive:true
					},
					{
						id:1,
						name:'在家炸鸡',
						isActive:false
					},
					{
						id:2,
						name:'在家烘培',
						isActive:false
					},
					{
						id:3,
						name:'生鲜',
						isActive:false
					},
					{
						id:4,
						name:'冰品',
						isActive:false
					},
					{
						id:5,
						name:'闪冲咖啡',
						isActive:false
					},
					{
						id:6,
						name:'主食',
						isActive:false
					},
				],
				menus:[],
				warningText:'珍惜粮食 按需点餐',
				selectList:[
					{
						name:'经典菜单',
					}
				],
				foods:[
					{
						id:0,
						name:'安心大油条',
						price:8
					},
					{
						id:1,
						name:'皮蛋瘦肉粥',
						price:10.5
					},
					{
						id:2,
						name:'香脆薯饼',
						price:8
					}
				],
				allFoods:[],
				cartFoods:[],
				confirmDel:false,
				storeInfo:'',
				userInfo:'',
				ifLogin:false,
			}
		},
		computed:{
			allNum(){
				return (index)=>{
					let allNum=0
					for(let i=0;i<this.allFoods.length;i++){
						allNum+=this.allFoods[i].num
					}
					return allNum
				}
			}
		},
		mounted(){
			// console.log(uni.getStorageSync('STATE_KEY').token)
			uni.request({
				url:'http://localhost:8080/kfc/user/category/type',
				header:{
					token:uni.getStorageSync('STATE_KEY').token
				},
				method:'get',
				success:async (res)=>{
					console.log('菜单信息',res.data.data)
					this.menus=res.data.data
					for(let i=0;i<this.menus.length;i++){
						this.menus[i].isActive=false
						this.menus[i].num=0
						if(i==0){
							this.menus[i].isActive=true
							this.nowCategory=this.menus[i].name
						}
					}
					uni.request({
						url:'http://localhost:8080/kfc/user/shoppingCart/list',
						method:'get',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('购物车信息',res.data.data)
							this.cartFoods=res.data.data
							for(let i=0;i<this.cartFoods.length;i++){
								for(let j=0;j<this.menus.length;j++){
									if(this.menus[j].id==this.cartFoods[i].category_id){
										this.menus[j].num+=this.cartFoods[i].number
									}
								}
								this.allPrice+=(this.cartFoods[i].amount*this.cartFoods[i].number)
								this.buyNum+=this.cartFoods[i].number
							}
							this.$forceUpdate()
						}
					})
					if(this.menus[0].type==1){
						this.categoryType=1
						uni.request({
							url:`http://localhost:8080/kfc/user/dish/list?categoryId=${this.menus[0].id}`,
							header:{
								token:uni.getStorageSync('STATE_KEY').token
							},
							method:'get',
							success:async (res)=>{
								await this.getAllFoods(res)
								this.$forceUpdate()
								console.log('当前分类下的菜品',this.allFoods)
							}
						})
					}
					else if(this.menus[0].type==2){
						this.categoryType=2
						uni.request({
							url:`http://localhost:8080/kfc/user/setmeal/list?categoryId=${this.menus[0].id}`,
							header:{
								token:uni.getStorageSync('STATE_KEY').token
							},
							method:'get',
							success:async (res)=>{
								await this.getAllFoods(res)
								this.$forceUpdate()
								console.log('当前分类下的套餐',this.allFoods)
							}
						})
					}
				}
			})
			uni.request({
				url:'http://localhost:8080/kfc/shop',
				method:'get'
			}).then(res=>{
				console.log('店铺信息',res.data.data)
				this.storeInfo=res.data.data
			})
			if(uni.getStorageSync('STATE_KEY')!=''){
				this.userInfo=true
			}else{
				this.userInfo=false
				this.ifLogin=true
			}
		},
		methods: {
			loginClose(){
				this.ifLogin=false
			},
			goLogin(){
				this.ifLogin=false
				uni.navigateTo({
					url:'../homePage/getUserInfo'
				})
			},
			goSearch(){
				uni.navigateTo({
					url:'./searchFood'
				})
			},
			goBack(){
				uni.navigateTo({
					url:'../homePage/homePage'
				})
			},
			goOrder(){
				uni.navigateTo({
					url:'./confirmOrder'
				})
			},
			addFood(index){
				this.allFoods[index].num++
				this.allPrice+=this.allFoods[index].price
				// this.allPrice=parseInt(this.allPrice.toFixed(2))
				this.buyNum=0
				let allNum=0
				for(let i=0;i<this.allFoods.length;i++){
					allNum+=this.allFoods[i].num
				}
				for(let i=0;i<this.menus.length;i++){
					if(this.menus[i].name==this.nowCategory){
						this.menus[i].num=allNum
					}
					this.buyNum+=this.menus[i].num
				}
				uni.request({
					url:`http://localhost:8080/kfc/user/shoppingCart/add?dishId=${this.allFoods[index].id}`,
					method:'post',
					header:{
						token:uni.getStorageSync('STATE_KEY').token
					},
					success:(res)=>{
						console.log(res.data)
					}
				})
				this.$forceUpdate()
				
			},
			multiFood(index){
				this.allFoods[index].num--
				this.allPrice-=this.allFoods[index].price
				// this.allPrice=parseInt(this.allPrice.toFixed(2))
				this.buyNum=0
				let allNum=0
				for(let i=0;i<this.allFoods.length;i++){
					allNum+=this.allFoods[i].num
				}
				for(let i=0;i<this.menus.length;i++){
					if(this.menus[i].name==this.nowCategory){
						this.menus[i].num=allNum
					}
					this.buyNum+=this.menus[i].num
				}
				uni.request({
					url:`http://localhost:8080/kfc/user/shoppingCart/sub?dishId=${this.allFoods[index].id}`,
					method:'post',
					header:{
						token:uni.getStorageSync('STATE_KEY').token
					},
					success:(res)=>{
						console.log(res.data)
					}
				})
				this.$forceUpdate()
			},
			goSelect(id){
				uni.navigateTo({
					url:`./selectStandard?id=${id}`
				})
			},
			currentTab(item){
				this.current=item.index
			},
			async getAllFoods(res){
				this.allFoods=res.data.data
				for(let i=0;i<this.allFoods.length;i++){
					await (this.allFoods[i].num=0)
				}
				uni.request({
					url:'http://localhost:8080/kfc/user/shoppingCart/list',
					method:'get',
					header:{
						token:uni.getStorageSync('STATE_KEY').token
					},
					success:(res)=>{
						console.log('购物车信息',res.data.data)
						this.cartFoods=res.data.data
						for(let i=0;i<this.allFoods.length;i++){
							for(let j=0;j<this.cartFoods.length;j++){
								if(this.allFoods[i].name==this.cartFoods[j].name){
									this.allFoods[i].num=this.cartFoods[j].number
								}
							}
						}
					}
				})
			},
			menuActive(index){
				for(let i=0;i<this.menus.length;i++){
					if(index==i){
						this.nowCategory=this.menus[i].name
						this.menus[i].isActive=true
						if(this.menus[i].type==1){
							this.categoryType=1
							uni.request({
								url:`http://localhost:8080/kfc/user/dish/list?categoryId=${this.menus[i].id}`,
								header:{
									token:uni.getStorageSync('STATE_KEY').token
								},
								method:'get',
								success:async (res)=>{
									await this.getAllFoods(res)
									this.$forceUpdate()
									console.log(this.allFoods)
								}
							})
						}
						else if(this.menus[i].type==2){
							this.categoryType=2
							uni.request({
								url:`http://localhost:8080/kfc/user/setmeal/list?categoryId=${this.menus[i].id}`,
								header:{
									token:uni.getStorageSync('STATE_KEY').token
								},
								method:'get',
								success:async (res)=>{
									await this.getAllFoods(res)
									this.$forceUpdate()
									console.log(this.allFoods)
								}
							})
						}
					}
					else{
						this.menus[i].isActive=false
					}
				}
				this.$forceUpdate()
			},
			kitchenMenuActive(index){
				for(let i=0;i<this.kitchenMenus.length;i++){
					if(index==i){
						this.kitchenMenus[i].isActive=true
						if(this.kitchenMenus[i].name=='当季热推'){
							this.scrollTop=0
						}
						else if(this.kitchenMenus[i].name=='在家炸鸡'){
							this.scrollTop=474.5
						}
						else if(this.kitchenMenus[i].name=='开心下午茶'){
							this.scrollTop=943.5
						}
					}
					else{
						this.kitchenMenus[i].isActive=false
					}
				}
			},
			scroll(e){
				console.log(e.detail.scrollTop)
			},
			scrollPage(e){
				this.pageScroll=e.detail.scrollTop
				if(this.pageScroll>=123){
					this.backActive=true
				}
				else{
					this.backActive=false
				}
			},
			async changeShow(){
				if(this.buyNum!=0){
					await uni.request({
						url:'http://localhost:8080/kfc/user/shoppingCart/list',
						method:'get',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log(res.data.data)
							this.cartFoods=res.data.data
						}
					})
					this.show=true
				}
			},
			close(){
				this.show=false
			},
			delClose(){
				this.confirmDel=false
			},
			delAll(){
				this.confirmDel=true
			},
			confirmDelete(){
				uni.request({
					url:'http://localhost:8080/kfc/user/shoppingCart/clean',
					method:'delete',
					header:{
						token:uni.getStorageSync('STATE_KEY').token
					},
					success:(res)=>{
						this.buyNum=0;
						for(let i=0;i<this.menus.length;i++){
							this.menus[i].num=0
						}
						for(let i=0;i<this.allFoods.length;i++){
							this.allFoods[i].num=0
						}
						this.confirmDel=false
						this.show=false
						this.allPrice=0
						this.$forceUpdate()
					}
				})
			},
			cancelDel(){
				this.confirmDel=false
			},
			changeSub(index){
				if(this.cartFoods[index].dish_id){
					uni.request({
						url:`http://localhost:8080/kfc/user/shoppingCart/sub?dishId=${this.cartFoods[index].dish_id}`,
						method:'post',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('购物车减少菜品',res.data)
						}
					})
				}
				else if(this.cartFoods[index].setmeal_id){
					uni.request({
						url:`http://localhost:8080/kfc/user/shoppingCart/sub?setmealId=${this.cartFoods[index].setmeal_id}`,
						method:'post',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('购物车减少套餐',res.data)
						}
					})
				}
				this.buyNum--
				for(let i=0;i<this.menus.length;i++){
					if(this.menus[i].id==this.cartFoods[index].category_id){
						this.menus[i].num--
					}
				}
				for(let i=0;i<this.allFoods.length;i++){
					if(this.allFoods[i].name==this.cartFoods[index].name){
						this.allFoods[i].num--
					}
				}
				this.allPrice-=this.cartFoods[index].amount
				this.cartFoods[index].number--
				if(this.cartFoods[index].number==0){
					this.cartFoods.splice(index,1)
					if(this.cartFoods.length==0){
						this.show=false
					}
				}
				this.$forceUpdate()
			},
			changeAdd(index){
				if(this.cartFoods[index].dish_id){
					uni.request({
						url:`http://localhost:8080/kfc/user/shoppingCart/add?dishId=${this.cartFoods[index].dish_id}`,
						method:'post',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('购物车增加菜品',res.data)
						}
					})
				}
				else if(this.cartFoods[index].setmeal_id){
					uni.request({
						url:`http://localhost:8080/kfc/user/shoppingCart/add?setmealId=${this.cartFoods[index].setmeal_id}`,
						method:'post',
						header:{
							token:uni.getStorageSync('STATE_KEY').token
						},
						success:(res)=>{
							console.log('购物车增加套餐',res.data)
						}
					})
				}
				this.buyNum++
				for(let i=0;i<this.menus.length;i++){
					if(this.menus[i].id==this.cartFoods[index].category_id){
						this.menus[i].num++
					}
				}
				for(let i=0;i<this.allFoods.length;i++){
					if(this.allFoods[i].name==this.cartFoods[index].name){
						this.allFoods[i].num++
					}
				}
				this.allPrice+=this.cartFoods[index].amount
				this.cartFoods[index].number++
			}
		},
		onLoad:function(options){
			if(options.setmealId){
				console.log('套餐id',options.setmealId)
				uni.request({
					url:'http://localhost:8080/kfc/user/shoppingCart/list',
					method:'get',
					header:{
						token:uni.getStorageSync('STATE_KEY').token
					},
					success:(res)=>{
						console.log('购物车信息',res.data.data)
						this.cartFoods=res.data.data
						for(let i=0;i<this.cartFoods.length;i++){
							if(this.cartFoods[i].setmeal_id==options.setmealId){
								for(let j=0;j<this.menus.length;j++){
									if(this.menus[j].id==this.cartFoods[i].cartgory_id){
										this.menus[j].num++
									}
								}
								for(let n=0;n<this.allFoods.length;n++){
									if(this.allFoods[n].name==this.cartFoods[i].name){
										this.allFoods[n].num++
									}
								}
							}
						}
						this.$forceUpdate()
					}
				})
			}
		}
	}
</script>

<style>
	page{
		/* background-color: rgb(235,0,41); */
	}
</style>

<style lang="scss">
	.mealContainer{
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		position: relative;
		.buyContainer{
			width: 100%;
			position: fixed;
			z-index: 99;
			bottom: 50rpx;
			left: 0;
			display: flex;
			align-items: center;
			.couponContainer{
				background-color: rgb(35,30,31);
				margin-left: 20rpx;
				width: 160rpx;
				color:#FFF;
				display: flex;
				flex-direction: column;
				align-items: center;
				border-radius: 15rpx;
				.title{
					font-weight: bold;
					font-size: 26rpx;
					margin-top: 15rpx;
				}
				.content{
					margin-top: 10rpx;
					font-size: 24rpx;
					margin-bottom: 15rpx;
				}
			}
			.buyInfo{
				width: 710rpx;
				background-color: rgb(161,161,161);
				display: flex;
				align-items: center;
				margin-left: 10rpx;
				border-radius: 15rpx;
				position: relative;
				transition: all 0.3s;
				.buyIcon{
					// background-color: aliceblue;
					background-image: url(../../static/orderMeal/buyCart.png);
					background-position: center;
					background-size: contain;
					background-repeat: no-repeat;
					filter: grayscale(50%);
					width: 60rpx;
					height: 80rpx;
					margin-left: 20rpx;
					margin-top: 12rpx;
					margin-bottom: 12rpx;
					position: relative;
					transition: all 0.5s;
					.buyNum{
						right:-13rpx;
						top:-8rpx;
						position: absolute;
						width:40rpx;
						height: 40rpx;
						background-color: rgb(35,30,31);
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						color:#FFF;
						font-weight: bold;
						font-size: 22rpx;
					}
				}
				.content{
					color:#FFF;
					margin-left: 20rpx;
					font-size: 30rpx;
				}
				.price{
					color:#FFF;
					margin-left: 20rpx;
					font-size: 40rpx;
					font-weight: bold;
				}
				.goOrder{
					position: absolute;
					right:20rpx;
					color:#FFF;
					display: flex;
					flex-direction: column;
					align-items: center;
					.title{
						font-size: 36rpx;
					}
					.englishTitle{
						font-size: 30rpx;
					}
				}
			}
		}
		.back{
			z-index: 99;
			position: fixed;
			top:0rpx;
			left: 0;
			width: 100vw;
			height:175rpx;
			transition: all 0.2s;
			overflow: hidden;
			.backContent{
				float: left;
				transition: all 0.2s;
				margin-top: 80rpx;
				margin-left: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				width: 60rpx;
				height: 60rpx;
				background-color: rgba(116, 116, 116, 0.6);
			}
			.search{
				float:left;
				margin-top: 80rpx;
				margin-left: 20rpx;
				width: 380rpx;
				display: flex;
				align-items: center;
				background-color: rgb(238,238,238);
				border-radius: 10rpx;
				color:#999999;
				font-size: 28rpx;
				.searchContent{
					margin-left: 15rpx;
					margin-top: 15rpx;
					margin-bottom: 15rpx;
				}
			}
			.otherSearch{
				float: left;
				margin-top: 80rpx;
				margin-left: 300rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				width: 60rpx;
				height: 60rpx;
				background-color: rgba(116, 116, 116, 0.6);
			}
		}
		.hotContainer{
			position: relative;
			width: 100%;
			// background-color: rgb(235,0,41);
			background-position: center;
			background-size: cover;
			.img{
				width: 100%;
				height: 520rpx;
			}
			// background-image: url(../../static/orderMeal/back.png);
			// .makeup{
			// 	position: absolute;
			// 	width: 400rpx;
			// 	top: 0;
			// 	right: -50rpx;
			// 	display: flex;
			// 	>view{
			// 		width: 50rpx;height: 60rpx;
			// 	}
			// 	.white{
			// 		background-color: #FFF;
			// 	}
			// }
			// .hotTitle{
			// 	font-size: 36rpx;
			// 	color:#FFF;
			// 	position: absolute;
			// 	left: 100rpx;
			// 	top: 55rpx;
			// 	z-index: 7;
			// 	font-family: 'PingFangSC-Mediuem';
			// }
			// .hotBack{
			// 	position: absolute;
			// 	font-weight: bold;
			// 	font-size: 130rpx;
			// 	color:#ffdf8b;
			// 	opacity: 0.4;
			// 	left: 20rpx;
			// 	top:-10rpx;
			// 	font-style: italic;
			// }
			// overflow: hidden;
			// .hotFoods{
			// 	display: flex;align-items: center;justify-content: space-between;
			// 	width: 90%;
			// 	margin: 0 auto;
			// 	margin-top: 130rpx;
			// 	.food{
			// 		background-color: #FFF;
			// 		width:30%;height: 250rpx;
			// 		border-radius: 10rpx;
			// 		display: flex;flex-direction: column;
			// 		.foodImg{
			// 			width: 100%;
			// 			height: 130rpx;
			// 			background-color: aliceblue;
			// 			background-position: center;
			// 			background-size: contain;
			// 			background-repeat: no-repeat;
			// 			border-top-left-radius: 10rpx;
			// 			border-top-right-radius: 10rpx;
			// 		}
			// 		.foodInfo{
			// 			margin-top: 10rpx;
			// 			display: flex;flex-direction: column;align-items: center;
			// 			.name{
			// 				width: 95%;
			// 				font-size: 25rpx;
			// 				font-weight: bold;
			// 			}
			// 			.priceAndAdd{
			// 				display: flex;align-items: center;justify-content: space-between;
			// 				width: 95%;
			// 				margin-top: 20rpx;
			// 				.priceContainer{
			// 					font-size: 25rpx;
			// 					color: rgb(235,0,41);
			// 					font-weight: bold;
			// 					.price{
			// 						font-size: 32rpx;
			// 					}
			// 				}
			// 				.add{
			// 					background-color: rgb(235,0,41);
			// 					width: 40rpx;height: 40rpx;
			// 					border-radius: 50%;
			// 					display: flex;align-items: center;justify-content: center;
			// 					color: #FFF;
			// 					margin-right: 10rpx;
			// 				}
			// 			}
			// 		}
			// 	}
			// }
		}
		.orderContainer{
			height: 1460rpx;
			width: 100vw;
			// margin-top: 20rpx;
			background-color: rgb(249,249,249);
			border-top-left-radius: 15rpx;
			border-top-right-radius: 15rpx;
			display: flex;flex-direction: column;
			.locationContainer{
				width: 100vw;
				padding-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.location{
					display: flex;
					align-items: center;
					margin-left: 20rpx;
					.own{
						display: flex;
						flex-direction: column;
						align-items: center;
						.ownIcon{
							width: 50rpx;
							height: 50rpx;
							// background-color: aliceblue;
							background-position: center;
							background-size: contain;
							background-image: url(../../static/orderMeal/self.png);
						}
						.ownContent{
							font-size: 26rpx;
							margin-top: 10rpx;
						}
					}
					.locContent{
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
						.titleContainer{
							display: flex;
							align-items: center;
							.title{
								font-size: 36rpx;
								color:#333333;
							}
							.titleIcon{
								margin-left: 20rpx;
							}
						}
						.content{
							font-size: 28rpx;
							color:#999999;
						}
					}
				}
				.prepare{
					margin-right: 20rpx;
					width: 100rpx;
					border: 1px solid #333333;
					.decorate{
						background-color: rgb(235,0,41);
						height: 20rpx;
					}
					.title{
						display:flex;
						align-items: center;
						justify-content: center;
						view{
							margin-top: 10rpx;
							margin-bottom: 10rpx;
							font-size: 24rpx;
							font-weight: bold;
						}
					}
				}
			}
			.warning{
				margin-top: 15rpx;
			}
			.foodContainer,.kitchenContainer{
				width: 100vw;
				display: flex;
				height: 1170rpx;
				.menus{
					overflow-y: scroll;
					width: 120rpx;
					display: flex;
					flex-direction: column;
					.menu{
						position: relative;
						.allNum{
							right:0;
							top:10rpx;
							position: absolute;
							width:30rpx;
							height: 30rpx;
							background-color: rgb(35,30,31);
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							color:#FFF;
							font-weight: bold;
							font-size: 20rpx;
						}
						width: 100%;
						height: 100rpx;
						display: flex;
						align-items: center;
						justify-content: center;
						border-bottom: 1px solid rgba(205, 205, 205,0.5);
						>view{
							display: flex;
							align-items: center;
							justify-content: center;
							height: 90rpx;
							width:90%;
							border-radius: 10rpx;
							font-size: 24rpx;
							// margin-left: 26rpx;
							// margin-right: 26rpx;
							text-align: center;
							transition: all 0.3s;
						}
					}
				}
				.content{
					flex: 1;
					display: flex;
					flex-direction: column;
					padding-bottom: 100rpx;
					.advertContainer{
						background-color: aliceblue;
						width: 600rpx;
						height: 150rpx;
						margin-left: 20rpx;
						margin-top: 10rpx;
						border-radius: 15rpx;
					}
					.title{
						font-size: 24rpx;
						color: #999999;
						margin-top: 20rpx;
						margin-bottom: 20rpx;
						margin-left: 20rpx;
					}
					.food{
						position: relative;
						display: flex;
						justify-content: space-between;
						width: 95%;
						margin: 0 auto;
						margin-bottom: 20rpx;
						background-color: #FFF;
						box-shadow: 5rpx 5rpx 5rpx rgba(205, 205, 205,0.5);
						.select{
							position: absolute;
							width: 120rpx;
							height: 60rpx;
							color: #FFF;
							background-color: rgb(235,0,41);
							border-top-left-radius: 10rpx;
							border-top-right-radius: 10rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							bottom:0;
							right: 20rpx;
							font-size: 24rpx;
							.numWarning{
								width:30rpx;
								height: 30rpx;
								background-color: rgb(35,30,31);
								border-radius: 50%;
								display: flex;
								align-items: center;
								justify-content: center;
								color:#FFF;
								font-weight: bold;
								font-size: 20rpx;
								position: absolute;
								right:-10rpx;
								bottom:45rpx;
							}
						}
						>.add{
							position: absolute;
							bottom:0;
							right: 20rpx;
							background-color: rgb(235,0,41);
							border-top-left-radius: 10rpx;
							border-top-right-radius: 10rpx;
							display: flex;
							align-items: center;
							justify-content: space-evenly;
							width: 70rpx;
							height: 60rpx;
							transition: all 0.3s;
							.multiImg{
								transition: all 0.3s;
								width: 45rpx;
								height: 45rpx;
								border-radius: 10rpx;
								background-color: rgb(235,0,41);
								display: flex;
								align-items: center;
								justify-content: center;
							}
							.foodNum{
								color:#FFF;
								font-size: 26rpx;
							}
							.addImg{
								transition: all 0.3s;
								width: 45rpx;
								height: 45rpx;
								border-radius: 10rpx;
								background-color: rgb(235,0,41);
								display: flex;
								align-items: center;
								justify-content: center;
							}
						}
						.foodImg{
							width: 300rpx;
							height: 220rpx;
							// background-color: aliceblue;
							margin-top: 10rpx;
							margin-bottom: 10rpx;
							margin-left: 10rpx;
							background-position: center;
							background-size: contain;
							background-repeat: no-repeat;
						}
						.foodContent{
							margin-top: 20rpx;
							margin-right: 20rpx;
							display: flex;
							flex-direction: column;
							align-items: flex-end;
							.name{
								font-size: 30rpx;
							}
							.type{
								margin-top: 10rpx;
								font-size: 26rpx;
							}
							.priceContainer{
								margin-top: 10rpx;
								color:rgb(235,0,41);
								font-weight: bold;
								font-size: 24rpx;
								.price{
									font-size: 32rpx;
								}
							}
						}
					}
				}
			}
		}
	}
	.popupContainer{
		background-color: #FFF;
		// z-index: 90;
		.allContainer{
			padding-bottom: 150rpx;
			margin-top: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.titleContainer{
				width: 710rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.title{
					font-size: 34rpx;
				}
				.operate{
					color:#999999;
					display: flex;
					align-items: center;
					.delIcon{
						margin-left: 6rpx;
					}
				}
			}
			.cartContainer{
				margin-top: 30rpx;
				width: 710rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.cartFood{
					width: 710rpx;
					display: flex;
					position: relative;
					margin-bottom: 30rpx;
					.foodImg{
						// background-color: aliceblue;
						width: 150rpx;
						height: 100rpx;
						background-position: center;
						background-size: contain;
						background-repeat: no-repeat;
					}
					.foodInfo{
						display: flex;
						flex-direction: column;
						margin-left: 20rpx;
						.name{
							font-size: 32rpx;
						}
						.priceContainer{
							margin-top: 20rpx;
							font-size: 24rpx;
							color:rgb(228,2,50);
							font-weight: bold;
							display: flex;
							align-items: flex-end;
							.price{
								font-size: 36rpx;
								line-height: 36rpx;
							}
						}
					}
					.changeNum{
						display: flex;
						align-items: center;
						position: absolute;
						right: 0;
						bottom: 0;
						.sub,.add{
							width: 50rpx;
							height: 50rpx;
							border-radius: 50%;
							display: flex;
							align-items: center;
							justify-content: center;
							border: 1px solid rgb(228,0,48);
						}
						.add{
							background-color: rgb(228,0,48);
						}
						.num{
							margin-left: 20rpx;
							margin-right: 20rpx;
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}
	.confirmContent{
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		.title{
			margin-top: 40rpx;
			font-size: 36rpx;
			margin-left: 40rpx;
			margin-right: 40rpx;
		}
		.operate{
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			>view{
				width: 120rpx;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 10rpx;
			}
			.cancelBtn{
				border: 1px solid #999999;
			}
			.confirmBtn{
				border:1px solid rgb(228,0,48);
				background-color: rgb(228,0,48);
				color:#FFF;
				margin-left: 30rpx;
			}
		}
	}
</style>
